<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Neumorphism Calculator</title>
		<link rel="stylesheet" href="https://xensers.github.io/neomorphism/fonts/Electronica-Normal/font.css">
		<link rel="stylesheet" href="https://xensers.github.io/neomorphism/fonts/TTNorms/stylesheet.css">
		<link rel="stylesheet" href="./calculate.css" />
	</head>
	<body>
		<div id="app">
		    <div class="calculator">
		        <div class="header">
		            <div class="logo">Xiasio</div>
		            <div class="title">Smart neumorphism<br/>calculator</div>
		        </div>
		        <div class="display">
		            <div class="display__inner">
		                <div class="display__outer">
		                    <div class="display__value"><span v-html="display">0</span></div>
		                </div>
		            </div>
		        </div>
		        <div class="separator"></div>
		        <div class="buttons">
		            <div class="btn btn_red" @click="clear">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>C</span></div>
		                </div>
		            </div>
		            <div class="btn btn_orange" @click="sign">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>+/-</span></div>
		                </div>
		            </div>
		            <div class="btn btn_orange" @click="percent">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>%</span></div>
		                </div>
		            </div>
		            <div class="btn btn_orange" @click="divide">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>÷</span></div>
		                </div>
		            </div>
		            <div class="btn" @click="append('7')">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>7</span></div>
		                </div>
		            </div>
		            <div class="btn" @click="append('8')">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>8</span></div>
		                </div>
		            </div>
		            <div class="btn" @click="append('9')">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>9</span></div>
		                </div>
		            </div>
		            <div class="btn btn_orange" @click="times">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>X</span></div>
		                </div>
		            </div>
		            <div class="btn" @click="append('4')">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>4</span></div>
		                </div>
		            </div>
		            <div class="btn" @click="append('5')">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>5</span></div>
		                </div>
		            </div>
		            <div class="btn" @click="append('6')">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>6</span></div>
		                </div>
		            </div>
		            <div class="btn btn_orange" @click="minus">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>-</span></div>
		                </div>
		            </div>
		            <div class="btn" @click="append('1')">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>1</span></div>
		                </div>
		            </div>
		            <div class="btn" @click="append('2')">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>2</span></div>
		                </div>
		            </div>
		            <div class="btn" @click="append('3')">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>3</span></div>
		                </div>
		            </div>
		            <div class="btn btn_orange" @click="add">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>+</span></div>
		                </div>
		            </div>
		            <div class="btn btn_large" @mouseup="append('0')">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>0</span></div>
		                </div>
		            </div>
		            <div class="btn" @click="dot">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>.</span></div>
		                </div>
		            </div>
		            <div class="btn btn_orange" @click="equal">
		                <div class="btn__inner">
		                    <div class="btn__outer"><span>=</span></div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
		<script src="./calculate.js"></script>
	</body>
</html>